<template>
    <!-- 话术库 -->
    <div class="madp-verbal" v-loading="initLoading">
        <div v-if="groupList.length == 0 && !initLoading" class="madp-verbal-nothing">
            <img src="@/assets/img/no-words.png" />
            <div>暂无分组话术内容</div>
        </div>
        <div class="madp-verbal-main" v-else>
            <div class="madp-verbal-main-head" ref="head">
                <div v-if="groupList.length != 0" class="madp-verbal-main-head-search">
                    <el-input v-model="searchT" @change="searchFn" placeholder="请输入话术内容"></el-input>
                    <i class="el-icon-search"></i>
                </div>
                <div class="scroll">
                    <div class="madp-verbal-main-head-group">
                        <div :class="{ is_active: item.id == activeGroupId }" class="madp-verbal-main-head-group-item" v-for="item in groupList" :key="item.id" @click="handleGroup(item)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
                <div class="scroll">
                    <div class="madp-verbal-main-head-type" v-show="typeList.length > 0">
                        <div :class="{ is_active: item.id == activeTypeId }" class="madp-verbal-main-head-type-item" v-for="item in typeList" :key="item.id" @click="handleType(item)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="madp-verbal-main-content" :style="{ paddingTop: height }">
                <div v-if="talkContentList.length == 0 && !initLoading" class="madp-verbal-nothing">
                    <img src="@/assets/img/no-words.png" />
                    <div>暂无话术内容</div>
                </div>
                <div v-else>
                    <div class="madp-verbal-main-content-item" v-for="item in talkContentList" :key="item.id">
                        <div class="content-box">
                            <div class="content">
                                {{ item.content }}
                            </div>
                        </div>
                        <div class="btns">
                            <div class="btn" @click="copyChat(item)"><i class="el-icon-document-copy"></i> 复制文本</div>
                            <div class="btn" @click="sendChat(item)"><i class="el-icon-position"></i> 发送文本</div>
                        </div>
                    </div>
                    <div class="more-btn" v-if="page.total > page.current * page.size" @click="getMore">查看更多</div>
                    <div v-else-if="page.total > 0" class="footer">— 哎呀，这里是底部了啦 —</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import * as verbalManageApi from '@/api/verbal-manage';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        mixins: [mxInitWxConfig],
        data() {
            return {
                // 话术分组
                groupList: [],
                // 话术子分组
                typeList: [],
                // 话术内容
                talkContentList: [],
                // 搜索内容
                searchT: '',
                // 分页
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                // 当前选中话术分组id
                activeGroupId: '',
                // 当前选中子分组id
                activeTypeId: '',
                // initLoading
                initLoading: true,
                height: 0
            };
        },
        watch: {
            wxUserId(val) {
                if (val) {
                    this.initGroupList();
                }
            }
        },
        methods: {
            // 初始化话术分组
            initGroupList() {
                let params = {
                    wxUserId: this.wxUserId
                };
                verbalManageApi.getMediumGroup(params).then((res) => {
                    this.initLoading = false;
                    if (res.data.code != 0) return;
                    this.groupList = res.data.data;
                    if (this.groupList.length > 0) {
                        this.handleGroup(this.groupList[0]);
                    }
                });
            },
            // 根据输入内容搜索话术
            searchFn() {
                this.talkContentList = [];
                this.page.current = 1;
                this.getList();
            },
            // 搜索话术内容
            getList(data) {
                if (!data) {
                    this.page.current = 1;
                    this.talkContentList = [];
                }
                let { current, size } = this.page;
                let obj = {
                    current,
                    size,
                    wxUserId: this.wxUserId,
                    mediumGroupId: this.activeTypeId || this.activeGroupId,
                    searchStr: this.searchT
                };
                verbalManageApi.materialLibraryList(obj).then((res) => {
                    if (res.data.code === 0) {
                        this.talkContentList.push(...res.data.data.records);
                        this.page.total = res.data.data.total;
                    }
                });
            },
            // 选择话术分组
            handleGroup(data) {
                if (this.activeGroupId != data.id) {
                    this.activeGroupId = data.id;
                    // 查询当前话术分组下是否存在子分组，如果有分组，则默认选择第一个子分组，如果没有，则直接查询当前分组下话术
                    let res = this.getTypeList(data);
                    this.activeTypeId = res.length && res.length > 0 ? res[0].id : '';
                    this.typeList = res;
                    this.getList();
                    this.$nextTick(() => {
                        this.height = window.getComputedStyle(this.$refs.head).height;
                    });
                }
            },
            // 搜索话术子分组
            getTypeList(data) {
                let { children } = data;
                if (children && children.length > 0) {
                    children = [{ deptIds: '', depts: '', id: this.activeGroupId, name: '全部', order: 0, parentId: 2, visibleRange: 1 }, ...children];
                }
                return children;
            },
            // 选择话术子分组
            handleType(data) {
                if (this.activeTypeId != data.id) {
                    this.activeTypeId = data.id;
                    this.getList();
                }
            },
            // 点击选择更多
            getMore() {
                this.page.current++;
                this.getList(1);
            },
            // 点击发送
            sendChat(item) {
                if (
                    // 从单聊会话的工具栏进入 从群聊会话的工具栏进入 从会话的聊天附件栏进入
                    this.entry === 'single_chat_tools' ||
                    this.entry === 'group_chat_tools' ||
                    this.entry === 'chat_attachment'
                ) {
                    this.$wxApi
                        .sendChatMessage('text', {
                            content: item.content //文本内容
                        })
                        .then((res) => {
                            //
                        });
                }
            },
            // 点击复制
            copyChat(item) {
                let copyText = item.content;
                this.$copyText(copyText).then(
                    (e) => {
                        console.log('复制成功:', e);
                        this.$toast({
                            text: '复制成功'
                        });
                    },
                    (e) => {
                        this.$toast({ text: '复制失败', type: 'error' });
                        console.log('复制失败:', e);
                    }
                );
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-verbal {
        width: 100%;
        height: fit-content;
        min-height: 100vh;
        background: #fff;
        &-nothing {
            text-align: center;
            img {
                width: 140px;
                height: 84px;
                margin-top: 4rem;
            }
            div {
                margin-top: 15px;
            }
        }
        &-main {
            &-head {
                width: 100%;
                height: fit-content;
                position: fixed;
                top: 0;
                z-index: 1111;
                background: #fff;
                &-search {
                    width: 90%;
                    margin: 8px auto 0 auto;
                    position: relative;
                    i {
                        position: absolute;
                        right: 5px;
                        top: 12px;
                        font-size: 16px;
                    }
                }
                .scroll {
                    width: 100%;
                    padding: 0 8px;
                    overflow-y: hidden;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                }
                &-group {
                    width: 100%;
                    border-bottom: 1px solid #dcdfe6;
                    display: flex;
                    &-item {
                        flex: 1;
                        min-width: fit-content;
                        margin: 0 12px;
                        text-align: center;
                        padding: 8px 0;
                        font-size: 14px;
                        font-weight: 500;
                        color: rgba(44, 44, 44, 0.5);
                    }
                    .is_active {
                        position: relative;
                        color: #2c2c2c;
                        font-weight: 500;
                    }
                    .is_active:after {
                        content: '';
                        width: 24px;
                        height: 4px;
                        background: #ed5555;
                        border-radius: 2px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: 0 auto;
                    }
                }
                &-type {
                    width: 100%;
                    border: 0.1px solid #fff;
                    border-bottom: 1px solid #dcdfe6;
                    display: flex;
                    &-item {
                        flex: 1;
                        min-width: fit-content;
                        padding: 4px 8px;
                        text-align: center;
                        font-size: 12px;
                        color: rgba(44, 44, 44, 0.5);
                        background: rgba(44, 44, 44, 0.04);
                        border-radius: 4px;
                        margin: 8px 4px;
                    }
                    .is_active {
                        position: relative;
                        color: #fff;
                        background: rgba(97, 173, 255, 1);
                    }
                }
            }
            &-content {
                width: 96%;
                height: 101vh;
                margin: 0 auto;
                overflow-y: auto;
                padding: 0 8px;
                &::-webkit-scrollbar {
                    display: none;
                }
                &-item {
                    margin: 12px auto 24px auto;
                    border-radius: 4px;
                    box-shadow: 3px 3px 6px 0px rgba(181, 181, 181, 0.8);
                    .content-box {
                        padding: 14px;
                    }
                    .content {
                        height: fit-content;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 4;
                        overflow: hidden;
                        font-size: 15px;
                        white-space: pre-line;
                    }
                    .btns {
                        display: flex;
                        border-top: 1px solid rgba(181, 181, 181, 0.4);
                        .btn {
                            flex: 1;
                            text-align: center;
                            height: 50px;
                            line-height: 50px;
                        }
                        .btn:nth-child(1) {
                            border-right: 1px solid rgba(181, 181, 181, 0.4);
                        }
                    }
                }
            }
        }
    }
    .more-btn {
        font-size: 14px;
        height: 40px;
        width: 80%;
        margin: 16px auto;
        text-align: center;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.8);
        line-height: 40px;
        border-radius: 20px;
        border: 1px solid rgba(44, 44, 44, 0.1);
    }
    .footer {
        font-size: 14px;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.5);
        text-align: center;
        margin: 16px 0;
    }
</style>
